<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>报修分派管理</title>
		<link rel="stylesheet" type="text/css" href="../font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
		<style>
			#tools{
				display: flex;				
			}
			#search{			
				width: 600px;
				display: flex;
				justify-content: space-between;
			}
			#refresh{
				margin-left: 50px;
			}
		</style>
	</head>
	<body>
		<h1>报修分派管理</h1>
		<hr />
		<div id="tools">
		<div>
			<button class="layui-btn layui-btn-danger"onclick="showAddeqRepairModel()"><i class="fa fa-plus"></i> 报修分派</button>
		</div>
		
			<div id="search">
				<input type="text" id="equipmentName" placeholder="设备名" style="flex-grow: 2; width: 6.25rem; margin-right:15px;margin-left: 15px;"   >
				<input type="text" id="equipmentClass" placeholder="报修人" style="flex-grow: 2;width: 6.25rem;margin-right: 15px;" >
		        <select name="" id="equipmentFloor" style="flex-grow: 1;width: 6.25rem;margin-right:15px">
					<option value=""></option>
					<option value="">一层</option>
					<option value="">二层</option>
					<option value="">三层</option>
					<option value="">四层</option>
					<option value="">五层</option>
					<option value="">六层</option>
				</select>
				<button class="layui-btn" onclick="searchEquipment()"><i class="fa fa-search"></i>查询</button>
				<div id="refresh">
					<button onclick="window.location.reload()" class="layui-btn layui-btn-primary layui-btn-sm"><i class="fa fa-undo"></i></button>
					<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="fa fa-link"></i></button>
				</div>
			</div>
		</div>
		
		<table id="eqRepairInfoTable" lay-even class="layui-table" lay-filter="test">
		
		</table>
		
		<div id="addeqRepairModel" style="display: none;" align="center">
			<form class="layui-form layui-form-pane" style="margin: 0px 20px;height: 300px;">
				<div class="layui-form-item">
					<label class="layui-form-label">指派人员</label>
					<div class="layui-input-block">
						<select id="rePerson" lay-verify="required">
						        <option value=""></option>
						        <option value="0">james</option>
						        <option value="1">jerry</option>
						        <option value="2">charles</option>
						        <option value="3">william</option>
						</select>
					</div>
				</div>
				
				<div class="layui-form-item">
					<div class="layui-input-block" style="margin-left: 0px;">
						<button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>
		
		<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			function searchEquipment(){
			    layui.table.reload("userInfoTable",{
				    where:{
					   deviceName:layui.$("#equipmentName"),
					   repairId:layui.$("equipmentClass"),
					   floor:layui.$("#equipmentFloor")	
				    }
			    })
			}
			
			var options = {
				elem: '#eqRepairInfoTable',
				height: 312,
				url: 'http://127.0.0.1:8080/springmvc_demo1/repair/selectByPage', //数据接口
				page: true, //开启分页
				response: {
					statusCode: 200 //规定成功的状态码，默认：0
				},
				parseData: function(res) { //res 即为原始返回的数据
					console.log(res);
					return {
						"code": res.code, //解析接口状态
						"msg": res.msg, //解析提示文本
						"count": res.data.total, //解析数据长度
						"data": res.data.list //解析数据列表
					};
				},
				cols: [
					[ //表头
						{
							type: 'checkbox'
						}, {
							field: 'repairId',
							title: '报修单号',
							width: 120,
							sort: true
						}, {
							field: 'build',
							title: '楼栋号',
							width: 100
						}, {
							field: 'floor',
							title: '楼层',
							width: 100,
							sort: true
						}, {
							field: 'deviceName',
							title: '设备名称',
							width: 200
						}, {
							field: 'userName',
							title: '报修人',
							width: 150
						},{
							field: 'remark',
							title: '备注',
							width: 150
						},{
							field: 'spLocation',
							title: '具体位置',
							width: 150
						},{
							field: 'repairStatus',
							title: '状态',
							width: 100
						},{
							field: 'createTime',
							title: '报修时间',
							width: 178
						}
					]
				]
			};
			
			layui.use('table', function() {
				var table = layui.table;		
				//第一个实例
				eqRepairTab = table.render(options);		
			});
			
			function showAddeqRepairModel() {
				layui.use('layer', function() {
					var layer = layui.layer;
					var $ = layui.$;
			
					eqRepairMode = layer.open({
						title: '指派人员',
						type: 1,
						content: $('#addeqRepairModel') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
					});
				});
			}
			
			layui.use('form', function() {
				var form = layui.form;	
				//监听提交
				form.on('submit(formDemo)', function(data) {
					//关闭模态框
					layui.use('layer', function() {
			
						//通过ajax提交
						var obj = document.getElementById("rePerson");
						console.log(obj.options[obj.selectedIndex].value);
						
			
					});
					return false;
				});
			});			
		</script>
	</body>
</html>
